<template>
	<view class="container">
		<view class="commonNavbar">
			<!--回到上一页-->
				<span class="goBack" @click="goBack"> < </span>
			
			<!--文章作者信息、名字-->
			<view class="aboutAuthor">
				<view class="seeAuthor" hover-class="none" @click="seeHisHome">
					<div v-if="info.userIsVip == true" class="vipLogo t-icon t-icon-VIP" style="transform: rotate(45deg);"></div>
					<view class="headPic">
						<image :src="info.userAvatar"></image>
					</view>
					<div>{{info.userNickName}}</div>
				</view>
				<!--关注-->
				<view class="concern" @click="concernAuther(isConcernThisAuthor)">
					<!--占坑，过渡动画，设想为关注用户时来一个简短的转圈圈  loading-->
					<transition name="concernStatusChange">
						<view v-if="isConcernThisAuthor === false" class="notConcern"></view>
						<view v-else class="concerned"></view>
					</transition>
				</view>
			</view>
			
			
			<!--ui是三个点 ... -> 分享、举报等，从下方弹出的一个界面-->
			<view class="otherOptions t-icon t-icon-qita" @click="openOtherOptionsPart()" >
			</view>
			
			<view v-if="otherOptionsFlag == true" ref="mask" class="mask"
				  style="z-index: 10;"
				  :style="{height: viewHeight+'px', width: viewWidth+'px', top: -barHeight+'px',backgroundColor: maskColor}" 
				  @click="controlMask()">
				<view v-if="otherOptionsFlag == true" class="maskAndOptions" 
					  style="z-index: 20;" :style="{bottom:maskOptions}"
					  @click="controlMask()">
					<view class="sharePart">
							<view class="shareCard" v-for="(item, index) in shareCard" :key="index">
								<div class="eachSharePart">
									<div class="everCard">
										<div class="shareGoalLogo" :class="item.logo"></div>
									</div>
									<span>{{item.goal}}</span>
								</div>
							</view>
					</view>
					
					
					
					<view class="otherOptionsAboutArticle">
						<view class="shareCard" v-for="(item, index) in otherOptions" :key="index">
							<div class="eachSharePart">
								<div class="everCard">
									<div class="shareGoalLogo" :class="item.funcIcon"></div>
								</div>
								<span>{{item.funcName}}</span>
							</div>
						</view>
					</view>
					
					<view class="closeMask" @click="controlMask()">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				type:Object,
				default:{},
				required:true
			},
			id:{
				type: String,
				default:'',
				required: true
			}
		},
		data(){
			return{
				isShare: false,
				shareOver: false,
				//authorName: "暮商十二",
				//authorHomeUrl: require("../../static/image/teamLogo.png"),
				isConcernThisAuthor: false, //后续开始对接口了就更改为通过在onLoad钩子中检索登录用户的关注列表，如果没有改作者那么就设置为false
				otherOptionsFlag: false,
				viewHeight: 0,
				viewWidth: 0,
				barHeight: 0,
				maskColor: '',
				maskOptions: '',
				shareCard: [
					{
						id:0,
						goal:"QQ",
						path:"",
						logo:"t-icon t-icon-QQ"
					},
					{
						id:1,
						goal:"微信",
						path:"",
						logo:"t-icon t-icon-weixin"
					},
					{
						id:2,
						goal:"朋友圈",
						path:"",
						logo:"t-icon t-icon-pengyouquan"
					},
					{
						id:3,
						goal:"微博",
						path: "",
						logo: "t-icon t-icon-weibo"
					}
				],
				otherOptions:[
					{
						id: 0,
						funcName: "收藏",
						funcIcon: "t-icon t-icon-favorites",
					},
					{
						id: 1,
						funcName: "举报",
						funcIcon: "t-icon t-icon-jubao"
					}
				]
				
				
			}
		},
		methods:{
			concernAuther(flag){
				this.isConcernThisAuthor = !flag
				
				let f = this.isConcernThisAuthor==true?1:0
				uni.request({
					url:`http://162.14.102.246:8090/user/front/follow/${this.info.id}/${f}`,
					method:'GET',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					if(res.data.code == 200){
						if(f == 1){
							this.$store.state.loginUser.userBaseInfo.concernCount--
							let index = this.$store.state.loginUser.userBaseInfo.concernList.indexOf(
											this.$store.state.loginUser.userBaseInfo.concernList.find(obj => obj.id == this.info.id))
							this.$store.state.loginUser.userBaseInfo.concernList.splice(index, 1)
						}else{
							this.$store.state.loginUser.userBaseInfo.concernCount++
							this.$store.state.loginUser.userBaseInfo.concernList.push({
								id: this.info.id,
								avatar: this.info.userAvatar,
								nickname: this.info.userNickName,
								isVip: this.info.isVip,
								introduce: this.info.introduce,
								inConcern: true
							})
						}
					}
				})
			},
			openOtherOptionsPart(){
				this.controlMask()
				// 获取当前设备的屏幕高度 + 顶部高度
				uni.getSystemInfo({
					success: (res) => {
						this.barHeight = uni.getSystemInfoSync().statusBarHeight+10;
						this.viewHeight = res.screenHeight;
						this.viewWidth = res.screenWidth;
					}
				})
			},
		    controlMask(){
				this.maskColor = this.otherOptionsFlag==false ? "rgba(0, 0, 0, 0.618)" : "rgba(0, 0, 0, 0)";
				this.maskOptions =  this.otherOptionsFlag==false ? "0%" : "-35%";
				this.otherOptionsFlag = !this.otherOptionsFlag;
			},
			seeHisHome(){
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/homePage/${this.info.id}`,
					header:{
						xdzn_token: this.$store.state.loginUser.token
						
					}
				}).then(res => {
					//console.log('获取数据',res.data.data.home)
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/otherUserHome?info="+encodeURIComponent(JSON.stringify(res.data.data.home))
					})
				})
			},
			goBack(){
				uni.navigateBack({
					delta:1,
					animationDuration:300,
					animationType:'slide-out-left'
				})
			}
		},
		mounted() {
			//console.log(this.info.userNickName)
		},
		onLoad() {
			console.log(this.info)
		}
	}
</script>

<style scoped>
	.container{
		z-index: 999;
	}
	navigator{
		display: block;
	}
	.container{
		position: fixed;
		width: 100%;
		height: 8.5%;
		box-shadow: 0 2px 6px rgba(219, 221, 222, 1.0);
	}
	.commonNavbar{
		width: 100%;
		height: 50%;
		position: relative;
		top: 50%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.seeAuthor{
		display: flex;
		width: 8rem;
		font-size: 0.8rem;
		align-items: center;
		text-overflow: ellipsis;
	}
	.seeAuthor>div{
		margin-left: 3px;
	}
	.headPic{
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		border: 1px solid darkgrey;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.goBack{
		margin-left: 0.6rem;
		font-size: 2rem;
		color: darkgrey;
		margin-bottom: 0.3rem;
	}
	.headPic>image{
		width: 1.8rem;
		height: 1.8rem;
	}
	.goBack>span{
		font-size: 2rem;
	}
	.aboutAuthor{
		width: 50%;
		height: 84%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 3px;
	}
	.concern{
		width: 3rem;
		height: 96%;
		border-radius: 0.35rem;
		transition: all 0.3s linear;
		overflow: hidden;
	}
	.notConcern{
		width: 3rem;
		height: 100%;
		background-image: linear-gradient(to top right, rgba(255,228,181,1), rgba(255,222,173,1));
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.notConcern::before{
		content: "+";
		font-size: 0.8rem;
		font-weight: 400;
		color: rgba(248, 128, 0, 1.0);
	}
	.notConcern::after{
		content: "关注";
		margin-left: 3px;
		font-size: 0.65rem;
		font-weight: 400;
		color: rgba(248, 128, 0, 1.0);
	}
	.otherOptions{
		margin-right: 0.6rem;
	}
	.concerned{
		width: 3rem;
		height: 100%;
		background-color: rgba(240, 240, 240, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.concerned::after{
		content: "已关注";
		font-size: 0.65rem;
		font-weight: 400;
		color: rgba(169, 168, 172, 1.0);
	}
	.mask{
		z-index: 999;
		background-color: rgba(0, 0, 0, 0);
		position: absolute;
		transition: background-color 0.5s ease-in;
	}
	.maskAndOptions{
		position: absolute;
		bottom: -35%;
		width: 100%;
		height: 35%;
		background-color: ghostwhite;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		transition: all 0.5s ease-in;
	}
	.sharePart{
		display: flex;
		width: 90%;
		height: 28%;
		margin: 0 auto;
		justify-content: space-around;
		align-items: center;
		margin-top: 10px;
	}
	.eachSharePart{
		width: 3rem;
		height: 5rem;
	}
	.eachSharePart>span{
		font-size: 0.7rem;
		display: flex;
		justify-content: center;
		color: darkgrey;
		margin-top: 2px;
	}
	.everCard{
		height: 3rem;
		width: 3rem;
		background-color: white;
		border-radius: 0.8rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shareGoalLogo{
		width: 1.8rem !important;
		height: 1.8rem !important;
	}
	.otherOptionsAboutArticle{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 2.5rem;
	}
	
</style>